<template>
  <div>
    <!-- 分页组件 -->
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background small
      v-model:current-page="currentPage" :page-sizes="pageSizes" v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination> -->

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes" background
      size="small" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

  </div>
</template>

<script>


export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Pagination',
  props: {
    totalCount: {
      type: Number,
      default: 0, //总数
    },
    pageSizes: {
      type: Array,
      default: () => [10, 30, 50, 100],
    },
    // limit: {
    //   type: Number,
    //   default: 10//每页显示几条数据
    // },
    // page: {
    //   type: Number,
    //   default: 1//当前页数
    // }
  },

  data() {
    return {
      pageSize: 10,
      currentPage: 1,
    }
  },

  mounted() { },

  computed: {},
  methods: {
    // 每页显示多少条
    handleSizeChange(size) {
      this.pageSize = size
      this.$emit('pagination', { page: this.currentPage, limit: size })
    },
    // 当前页数
    handleCurrentChange(Current) {
      this.currentPage = Current
      this.$emit('pagination', { page: Current, limit: this.pageSize })
    },
    // 重置分页也可以在重新搜索中使用这个方法
    resetPagination() {
      this.currentPage = 1
      this.$emit('pagination', { page: 1, limit: this.pageSize })
    },
  },
}
</script>

<style lang="less" scoped>
.el-pagination {
  display: flex;

  .el-pagination__jump {
    display: flex;
    align-items: center;
  }

  .el-select {
    .el-input {
      .el-input__inner {
        height: 22px;
      }
    }
  }
}
</style>
